<template>
	<div class="workSpace">
		<div class="video">
			<p>
				<span class="title">精益制造</span>
				<span class="videoOne">摄像头（一）</span>
			</p>
			<!-- <video id="myVideo1" class="video-js" poster="../../assets/img/preDisplay.jpg">
				<source src="//vjs.zencdn.net/v/oceans.mp4" type="video/mp4">
			</video> -->
			<video playsinline="true" src="//vjs.zencdn.net/v/oceans.mp4" controls="controls" poster="../../assets/img/preDisplay.jpg">
				您的浏览器不支持 video 标签。
			</video>
		</div>
		<div class="video">
			<p>
				<span class="title">精益制造</span>
				<span class="videoOne">摄像头（一）</span>
			</p>
			<!-- <video id="myVideo2" class="video-js" poster="../../assets/img/preDisplay.jpg">
				<source src="http://vjs.zencdn.net/v/oceans.mp4" type="video/mp4">
			</video> -->
			<video src="//vjs.zencdn.net/v/oceans.mp4" controls="controls" poster="../../assets/img/preDisplay.jpg">
				您的浏览器不支持 video 标签。
			</video>
		</div>
		<div class="video">
			<p>
				<span class="title">精益制造</span>
				<span class="videoOne">摄像头（一）</span>
			</p>
			<!-- <video id="myVideo3" class="video-js" poster="../../assets/img/preDisplay.jpg">
				<source src="//vjs.zencdn.net/v/oceans.mp4" type="video/mp4">
			</video> -->
			<video src="//vjs.zencdn.net/v/oceans.mp4" controls="controls" poster="../../assets/img/preDisplay.jpg">
				您的浏览器不支持 video 标签。
			</video>
		</div>
	</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				videos: ['myVideo1', 'myVideo2', 'myVideo3']
			}
		},
		mounted() {
			this.initVideo();

		},
		watch: {
			'$route.path': function(newVal) {
				if (newVal != '/tabbar/workSpace') {
					player.dispose()
				}
			}
		},
		methods: {
			initVideo() {
				//初始化视频方法
				this.$video(myVideo1, {
					language: 'zh-CN',
					//确定播放器是否具有用户可以与之交互的控件。没有控件，启动视频播放的唯一方法是使用autoplay属性或通过Player API。
					controls: true,
					//自动播放属性,muted:静音播放
					autoplay: false,
					//建议浏览器是否应在<video>加载元素后立即开始下载视频数据。
					preload: "auto",
					//设置视频播放器的显示宽度（以像素为单位）
					//width: "90%",
					//自适应容器
					fluid: true,
					//设置视频播放器的显示高度（以像素为单位）
					height: "240px",
					//是否重新播放
					loop: false
				});
				this.$video(myVideo2, {
					//确定播放器是否具有用户可以与之交互的控件。没有控件，启动视频播放的唯一方法是使用autoplay属性或通过Player API。
					controls: true,
					//自动播放属性,muted:静音播放
					autoplay: false,
					//建议浏览器是否应在<video>加载元素后立即开始下载视频数据。
					preload: "auto",
					//设置视频播放器的显示宽度（以像素为单位）
					//width: "90%",
					//自适应容器
					fluid: true,
					//设置视频播放器的显示高度（以像素为单位）
					height: "240px",
					//是否重新播放
					loop: false
				});
				this.$video(myVideo3, {
					//确定播放器是否具有用户可以与之交互的控件。没有控件，启动视频播放的唯一方法是使用autoplay属性或通过Player API。
					controls: true,
					//自动播放属性,muted:静音播放
					autoplay: false,
					//建议浏览器是否应在<video>加载元素后立即开始下载视频数据。
					preload: "auto",
					//设置视频播放器的显示宽度（以像素为单位）
					//width: "90%",
					//自适应容器
					fluid: true,
					//设置视频播放器的显示高度（以像素为单位）
					height: "240px",
					//是否重新播放
					loop: false
				});
			}
		}
	}
</script>

<style scoped="scoped">
	audio, canvas, progress, video{
		width: 97%;
	}
	.video {
		background: white;
		margin-bottom: 10px;
		border-bottom: 1px solid #DDDDDD;
		padding-top: 10px;
		padding-left: 10px;
		padding-bottom: 10px;
	}

	.title {
		font-size: 17px;
		color: #2C3E50;
		letter-spacing: 0.1em;
		margin-right: 15px;
	}

	.videoOne {
		color: #00BFFF;
	}
</style>
